<template>
  <div class="seach">
    <div class="s-wu"></div>
    <!-- 搜索框 -->
    <div class="s-top">
      <img
        @click="callBack"
        src="../inchildren/image/jifen_icon_fanhui.png"
        alt=""
      />
      <input type="text" placeholder="洗面奶">
    </div>
    <div class="s-boder"></div>

    <!-- 分类 -->
    <div class="t-classify">
      <van-tabs
        v-model="activeName"
        color="#4E77FC"
        title-active-color="#4E77FC"
      >
        <van-tab title="产品" name="a">
          <!-- 耳机菜单 -->
          <div class="t-main">
            <div class="t-class-main">
              <span>排序</span>
              <img
                @click="btn0"
                src="../inchildren/image/sousuo_icon_paixu.png"
                alt=""
              />
              <div class="t-postion">
                <div
                  class="t-name"
                  v-show="isShow"
                  v-for="(item, index) in name"
                  :key="index"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>

            <div class="t-class-main1">
              <span>分类</span>
              <img
                @click="btn1"
                src="../inchildren/image/sousuo_icon_paixu.png"
                alt=""
              />
              <div class="t-postion1">
                <div
                  class="t-name1"
                  v-show="isShow1"
                  v-for="(item, index) in name1"
                  :key="index"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>

            <div class="t-class-main2">
              <span>品牌</span>
              <img
                @click="btn2"
                src="../inchildren/image/sousuo_icon_paixu.png"
                alt=""
              />
              <div class="t-postion2">
                <div
                  class="t-name2"
                  v-show="isShow2"
                  v-for="(item, index) in name2"
                  :key="index"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
          <div class="t-btn">
            <li
              v-for="(data, index) in btnList"
              :class="current === index ? 'active' : ''"
              :key="index"
              @click="btnClick(index)"
            >
              {{ data.title }}
            </li>
          </div>

          <!-- 搜索数据 -->

          <div class="s-Data">
            <div class="s-data" v-for="(item, index) in seachDate" :key="index">
              <div class="s-data-Pic">
                <img :src="item.img" alt="" />
              </div>

              <div class="s-data-right">
                <!-- 名称 -->
                <h5>{{ item.name }}</h5>
                <!-- 中间信息 -->
                <div class="s-data-main">
                  <span>4.42分</span>
                  <img
                    class="s-data-pic"
                    src="../inchildren/image/shouyedianping_icon_wujiaoxing.png"
                    alt=""
                  />
                  <p>1.2万+条评论</p>
                </div>
                <!-- 下面信息 -->
                <div class="s-data-footer">
                  <p>安全4.3</p>
                  <span>参考价￥340/30ml</span>
                  <div class="s-last">+对比</div>
                </div>
              </div>
              <div class="s-d-boder"></div>
            </div>
          </div>
        </van-tab>

        <van-tab title="成分" name="b">
          <img
          class="main-pic3"
          src="../inchildren/image/faxian_icon_empty.png"
          alt=""
        />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>



import { seachAPI } from "../../../services/FindDate";

export default {
  async created() {
    const FindSeach = await seachAPI({
      brand: 1,
      component: 1,
      name: "奶",
      option: 1,
      type: 0,
    });
    console.log(FindSeach);
    this.seachDate = FindSeach.data;
    console.log(this.seachDate);
  },

  data() {
    return {
      seachDate: [],
      value: "",
      isShow: false,
      isShow1: false,
      isShow2: false,
      activeName: "a",

      name: [
        {
          title: "综合智能排序",
        },
        {
          title: "用户评分从高到低",
        },
        {
          title: "用户评论数从多到少",
        },
      ],
      name1: [
        {
          title: "眼部护理",
        },
        {
          title: "隔离",
        },
        {
          title: "面霜",
        },
        {
          title: "界面",
        },
        {
          title: "其他护肤",
        },
      ],
      name2: [
        {
          title: "珀莱雅",
        },
        {
          title: "欧莱雅",
        },
        {
          title: "兰蔻",
        },

        {
          title: "雅诗兰黛",
        },
        {
          title: "其他品牌",
        },
      ],
      btnList: [
        {
          title: "全部",
        },
        {
          title: "新品",
        },
        {
          title: "黑眼圈",
        },
        {
          title: "眼袋",
        },
        {
          title: "国货",
        },
        {
          title: "评价",
        },
        {
          title: "紧致",
        },
        {
          title: "保湿",
        },
      ],
      current: 0,
    };
  },
  methods: {
    btn0() {
      this.isShow = !this.isShow;
      this.isShow1 = false;
      this.isShow2 = false;
    },

    btn1() {
      this.isShow1 = !this.isShow1;
      this.isShow = false;
      this.isShow2 = false;
    },

    btn2() {
      this.isShow2 = !this.isShow2;
      this.isShow1 = false;
      this.isShow = false;
    },
    btnClick(index) {
      this.current = index;
    },
    callBack(){
      console.log(1);
      this.$router.push({name:"index"});
    }
  },
};

</script>

<style lang="scss" >


/* .van-field__control{
  height: 30px;
} */
.s-wu {
  width: 750px;
  height: 88px;
  /* background: red; */
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
/* 搜索 */
.s-top input{
  margin: 10px 0 0 60px;
  width: 470px;
height: 66px;
background: #F5F5F5;
border-radius: 33px 33px 33px 33px;
opacity: 1;
outline: none;
border: 0;
}
.s-top input::-webkit-input-placeholder {
font-size: 22px;
font-family: PingFang SC-Light, PingFang SC;
font-weight: 300;
text-indent: 80px;
color: #999999;
}
.van-search__content {
  background-color: #f5f5f5 !important;
}
.s-top {
  width: 750px;
  height: 105px;

}
.s-top img {
  width: 22px;
  height: 44px;
  opacity: 1;
  float: left;
  margin-left: 45px;
  margin-top: 26px;
  /* border: 2px solid #000000; */
}
.van-search {
  width: 600px !important;
  float: left;
  // margin-left: 0 !important;
  // height: 90px;

  /* margin-left: 65px; */
}

.van-search__content--round {
  height: 70px !important;
    border-radius: 62.4375rem;
}

/* .van-tab__text--ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 20px !important;
} */
.van-tabs__nav{
  background-color: #fff;
}
.van-field__control {
  width: 470px;
  height: 40px;
  background: #f5f5f5;
  text-indent: 10px;
  font-size: 22px;
}
.s-boder {
  width: 750px;
  height: 0px;
  opacity: 0.2;
  border-bottom: 1px solid #707070;
}
/* 分类 */

.van-tabs__nav {
  background: #f5f5f5;
}
.van-tabs__nav--line {
  padding: 0 250px 0 250px;
  font-size: 50px;
}
.van-tab {
  line-height: 0px;
  font-size: 28px !important;
  line-height: 0px !important;
}
.van-tab__text--ellipsis {
  font-size: 28px !important;
  height: 50px;
  font-weight: bold;
  line-height: 50px;
}
.t-main {
  margin-top: 40px;
}

.t-class-main {
  width: 230px;
  font-size: 28px;
  margin-left: 95px;
  float: left;
}

.t-class-main1 {
  width: 215px;
  font-size: 28px;
  float: left;
}

.t-class-main2 {
  width: 200px;
  font-size: 28px;
  float: right;
}
.t-postion {
  position: absolute;
  left: 50px;
}
.t-postion1 {
  position: absolute;
  left: 310px;
}
.t-postion2 {
  position: absolute;
  right: 50px;
}
.t-name {
  width: 230px;
  height: 45px;
  font-size: 24px;
  line-height: 45px;
  padding-left: 7px;
  /* margin: 0 auto; */
  background: #f5f5f5;
  /* text-align: center; */
}
.t-name1 {
  /* position: absolute; */
  width: 150px;
  height: 45px;
  font-size: 24px;
  line-height: 45px;
  background: #f5f5f5;
  text-align: center;
}
.t-name2 {
  width: 150px;
  height: 45px;
  font-size: 24px;
  line-height: 45px;
  background: #f5f5f5;
  text-align: center;
}
/* 全部分类 */
.t-btn {
  width: 750px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex: 1;
  padding: 0 57px 0 57px;
}
.t-btn li {
  margin-top: 40px;
  width: 88px;
  /* height: 40px; */
  line-height: 40px;
  font-size: 24px;
  list-style: none;
  text-align: center;
  color: #2f2f2f;
}
.active {
  width: 88px;
  background-color: #ebebeb !important;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
}
/* 商品数据 */

.s-Data {
  width: 750px;
  margin-top: 53px;
  margin-bottom: 2px solid red;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.s-data {
  width: 635px;
  height: 200px;
  /* margin: 0 auto; */
  margin-bottom: 30px;
  border-bottom: 1px solid #8b8a8a;
  padding: 0 58px;
  width: 750px;
}
.s-data-Pic {
  display: inline-block;
  width: 168px;
  height: 168px;
  margin-right: 20px;
  float: left;
  border: 4px dashed black;
}
.s-data-Pic img {
  width: 160px;
  height: 160px;
  float: left;
}

.s-data-right {
  width: 430px;
  float: left;
}

.s-data-right h5 {
  margin-top: 40px;
  width: 296px;
  height: 33px;
  font-size: 24px;
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 600;
  color: #2f2f2f;
}

.s-data-main {
  width: 350px;
  height: 35px;
  /* background: pink; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.s-data-main span {
  width: 68px;
  height: 30px;
  font-size: 22px;
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #2f2f2f;
  line-height: 30px;
}
.s-data-main p {
  width: 140px;
  height: 30px;
  font-size: 22px;
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #2f2f2f;
  line-height: 30px;
}

.s-data-footer {
  width: 550x;
  height: 35px;
  margin-top: 8px;
}

.s-data-footer p {
  display: block;
  width: 82px;
  height: 36px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  font-size: 20px;
  border: 2px solid #999999;
  text-align: center;
  line-height: 36px;
  float: left;
}
.s-data-footer span {
  display: block;
  width: 200px;
  height: 28px;
  font-size: 20px;
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #2f2f2f;
  float: left;
  text-align: center;
  line-height: 36px;
}

.s-last {
  width: 82px;
  height: 36px;
  border-radius: 18px 18px 18px 18px;
  line-height: 33px;
  text-align: center;
  font-size: 20px;
  opacity: 1;
  border: 2px solid #f2f2f2;
  float: right;
}

.s-d-boder {
  width: 750px;
  margin-top: 200px;
}

.main-pic3 {
  margin-top: 50px;
  margin-left: 125px;
  width: 500px;
  height: 380px;
}
</style>
